define( [
  'require',
  'jquery',
  'api',
  'constants',
  'message',
  'bootstrap',
  '../jquery/colorpicker/spectrum'
], function( require, $, apis, c, msg ) {
  var returnParam = {};

  function colorCallback( color ) {
    if ( color ) {
      var rgb = color.toRgbString();
      setBackgroundColor( rgb, '#fff', true );
    }
  }

  $( "#js_color_anchor" ).spectrum( {
    color: '#fff',
    showInitial: true,
    preferredFormat: "hex",
    allowEmpty: false,
    localStorageKey: "spectrum-storage",
    move: colorCallback,
    hide: function( color ) {
      if ( color ) {
        $( '.js_colorRange_tool' ).css( {
          backgroundColor: color.toRgbString()
        } );
      }

      colorCallback.apply( this, arguments )
    },
    palette: [
      [
        "rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
        "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(239, 239, 239)", "rgb(243, 243, 243)", "rgb(255, 255, 255)"
      ],
      [ "rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
        "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
        "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
        "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
        "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
        "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
        "rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
        "rgb(19, 79, 92)", /*"rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
        "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
        "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)"
      ]
    ]
  } );

  var me = returnParam.$selector = $( '#editor-styles' );

  $.extend( returnParam, {
    options: {
      p: 1,
      l: 10,
      class: '.tagtpl-107,.tagtpl-229,.tagtpl-237,.tagtpl-233,.tagtpl-232'.replace( /\./g, '' )
    },
    selector: {
      container: '#style-overflow-list-ul', // 内容容器
      scroll: '#style-overflow-list', // 滚动加载监听对象
      filter: '#style-categories .filter' // 过滤的事件源
    },
    strReplace: function( str ) {
      return str.replace( /(__RESPATH__|__FORJS__|\/Public\/static)/g, c.imgDomain[ 0 ] );
    },
    doFitler: function( options, isEmpty ) {

      if ( this.loading ) return;

      this.loading = true;
      $( '.spinner', this.selector.container ).show();
      isEmpty && $( '>li', $( this.selector.container ).scrollTop( 0 ) ).remove();
      $( '.nodata', this.selector.container ).hide();

      return $.ajax( {
        type: 'post',
        url: apis.COMMON.GET_STYLE,
        data: $.extend( this.options, options ),
        success: function( data ) {
          this.loading = false;
          var styleArray = [];
          data = typeof data === 'string' ? $.parseJSON( data ) : data;
          if ( data.ret === 0 ) {
            if ( !data.data.styles || data.data.styles.length < this.options.l ) {
              this.isNoData = true;
              $( '.nodata', this.selector.container ).show();
            } else {
              this.isNoData = false;
            }

            for ( var i in data.data.styles ) {
              styleArray.push( data.data.styles[ i ].content || '' );
            }
            $( '.spinner', this.selector.container ).hide().before( $( this.strReplace( styleArray.join( '' ) ) ).tooltip( {
              'placement': 'right',
              'container': 'body'
            } ).removeClass( 'col-xs-12' ) );
          } else {
            msg.showWarning( data.msg, msg.showTime );
          }

        }.bind( this )
      } );
    },
    // 提供初始化加载方法
    init: function( options, selector, notLoad ) {
      var self = this;
      if ( !self.isLoad ) {
        self.isLoad = true;
        $.extend( this.selector, selector );

        $( this.selector.scroll ).scrollMax( $.proxy( function() {
          if ( !this.loading && !this.isNoData ) {
            $( '.spinner', self.selector.container ).show();
            this.doFitler( {
              p: ++this.options.p
            } );
          }
        }, this ) );

        $( document ).on( 'click', this.selector.filter, function() {
          $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
          var filter = ( $( this ).data( 'filter' ) || '' ).replace( /\./g, '' );
          var festival = $( this ).data( 'festival' ) || '';
          $( '.spinner', self.selector.container ).show();
          self.doFitler( {
            class: filter,
            festival: festival,
            p: 1
          }, !0 );
        } );
        return notLoad ? null : this.doFitler( options );
      }
    }
  } );



  $( '#style-categories >li', me ).hover( function() {
    $( '>.dropdown-menu', this ).addClass( 'show' )[ 0 ].clientWidth;
    $( '>.dropdown-menu', this ).addClass( 'open' );
  }, function() {
    $( '>.dropdown-menu', this ).removeClass( 'open show' );
  } );


  me.on( 'click', '#style-categories .filter', function() {
    var parentObj = $( this ).parents( '.dropdown' );
    parentObj.addClass( 'active' ).siblings().removeClass( 'active' );
    $( this ).addClass( 'active' );
    $( '#style-categories', me ).find( '.hover-line' ).transit( {
      x: parentObj.position().left,
      width: parentObj.outerWidth(),
    } );
  } );

  $( '#style-categories', me ).find( '.hover-line' ).transit( {
    x: 0,
    width: 48
  } );
  return returnParam;
} );
